/**
 * Created by kedong on 2016/4/18.
 */
var imgs = [
    "imgs/1.jpg",
    "imgs/2.jpg",
    "imgs/3.jpg",
    "imgs/4.jpg",
    "imgs/5.jpg",
    "imgs/6.jpg",
    "imgs/7.jpg"
];
window.onload = function () {
    pictrueView.init($(".J_imageList"));
    notifiy({
        body:"1234",
        dir:"auto",
        icon:"imgs/7.jpg"
    })
};

function notifiy(jsonMsg){
    Notification.requestPermission(function(permission){
        var notifiycation = new Notification("123456789",jsonMsg);
        console.log(permission);
    })
}

(function ($) {
    var pictrueView = function (dom) {
        var self = this;
        this.dom = dom;
        this.option = {
            max: 4,
            containerW: 600
        };
        this.getOptions();
        this.images = this.option.imgs;
        this.renderlist();
        // 渲染插件
        this.renderview();

        /**
         * 点击事件
         */

        $(".main_img img", $(this.dom)).click(function () {
            self.hidePvBox();
        });
        $(".pv_list_span_icon", $(this.dom)).click(function () {
            this.index = $(".pv_list_span_icon", $(self.dom)).index($(this));
            self.handleClick(this, self.dom);
        });
        // 上一张
        $(".left_btn", $(this.dom)).click(function () {
            self.handleClick_left(self.dom);
        });
        // 下一张
        $(".right_btn", $(this.dom)).click(function () {
            self.handleClick_right(self.dom);
        });
        $(".J_previewListIcon li img", $(this.dom)).click(function () {
            this.index = $(".J_previewListIcon li img", $(self.dom)).index($(this));
            self.handleClick_icon(this, self.dom);
        });

    };

    pictrueView.prototype = {
        getOptions: function () {
            var options = $(this.dom).attr("data_option");
            $.extend(this.option, options ? JSON.parse(options) : {});
        },
        renderlist: function () {
            var length, showImages, liW, ul, li, img;
            length = this.images.length;
            showImages = length > this.option.max ? this.images.slice(0, this.option.max) : this.images;
            liW = this.option.containerW * (1 / this.option.max).toFixed(3) - 6;
            ul = document.createElement("ul");
            ul.className = "J_previewListIcon";
            $(ul).css({
                width: "100%"
            });
            for (var i = 0; i < showImages.length; i++) {
                li = document.createElement("li");
                img = document.createElement("img");

                img.src = showImages[i];
                img.style.width = "100%";
                img.style.cursor = "pointer";

                li.style.width = liW + "px";
                li.style.marginLeft = "3px";
                li.style.float = "left";

                li.appendChild(img);
                $(ul).append(li);
            }
            $(this.dom).append(ul).css({
                margin: "10px"
            });

        },
        renderview: function () {
            var pv_box, pv_act, pv_bg, pv_bg_child, pv_list, pv_list_ul, pv_list_li, pv_list_span;
            pv_box = document.createElement("div");
            pv_box.className = "pv_box";

            pv_bg = '<div class="pv_bg">' +
                ' <span class="left_btn btn"> </span>' +
                ' <span class="main_img"> <img src=""/> </span>' +
                ' <span class="right_btn btn"> </span>' +
                ' </div>';

            pv_list = document.createElement("div");
            pv_list.className = "pv_list";
            this.images.length > 7 && $(pv_list).append(' <span class="left_btn btn"></span>');
            pv_list_ul = document.createElement("ul");
            for (var i = 0; i < this.images.length; i++) {
                pv_list_li = '<li><span class="pv_list_span_icon" url="' + this.images[i] + '"/></span>';
                $(pv_list_ul).append(pv_list_li);
            }
            $(pv_list).append(pv_list_ul);
            this.images.length > 7 && $(pv_list).append(' <span class="right_btn btn"></span>');

            $(pv_box).append(pv_act).append(pv_bg).append(pv_list).hide();
            $(this.dom).append(pv_box);

        },
        // 基本点击事件
        handleClick: function (dom, context) {
            console.log("更换图片");
            var pv_box, pv_list_li, url;
            pv_box = $(context).find(".pv_box");
            pv_list_li = pv_box.find(".pv_list li");
            url = $(dom).attr("url") || $(dom).attr("src");

            // 设置大图url
            pv_box.find(".main_img img").attr("src", url);
            // 设置缩略图选中状态
            $(".active").removeClass("active");
            pv_list_li.eq(dom.index).addClass("active");
            if ($(".active").next().length == 0) {
                $(context).find(".right_btn").hide();
            } else {
                $(context).find(".right_btn").show();
            }
            if ($(".active").prev().length == 0) {
                $(context).find(".left_btn").hide();
            } else {
                $(context).find(".left_btn").show();
            }
        },
        hidePvBox: function () {
            $(".pv_box:visible").hide(0, function () {
                var this_context = $(this).data().context;
                $(this_context).find(".J_previewListIcon").show();
            });
        },
        handleClick_icon: function (dom, context) {
            this.hidePvBox();
            this.handleClick(dom, context);
            $(this.dom).find(".J_previewListIcon").hide();

            var pv_box, pv_list_li, pv_list_li_span, pv_list_li_w, li_border_width, pv_list_ul_w;

            pv_box = $(dom).parents(".J_previewListIcon").next(".pv_box");
            pv_list_li = pv_box.find(".pv_list li");
            pv_list_li_span = pv_box.find(".pv_list li span");


            pv_list_ul_w = $(context).width() * 0.8;
            pv_list_li_w = (pv_list_ul_w / 7).toFixed(0);
            li_border_width = 4;

            pv_list_li.each(function (i, e) {
                $(e).css({
                    width: pv_list_li_w - li_border_width + "px",
                    left: (pv_list_li_w - 1) * i + li_border_width + "px"
                });
                $(e).find("span").css({
                    position: "absolute",
                    width: "100%",
                    height: "100%",
                    background: "url(" + $(e).find("span").attr("url") + ") no-repeat",
                    "background-size": "260%",
                    "background-position": "center center"
                });
            });

            pv_box.show().data({
                context: context
            });
        },
        handleClick_left: function (context) {
            // 左边边一个进行基本的点击事件
            var img = $(".active").prev().find("span");
            if (img.length > 0) {
                img.index = $(".pv_list li span", $(context)).index($(img));
                this.handleClick(img, context);
            }
        },
        handleClick_right: function (context) {
            // 缩略图向左移动
            if (this.images.length > 7) {
                var liList = $(".pv_list li", $(context)),
                    li_border_width = 4,
                // 向左偏移量
                    li_left_offset = $(liList).width() + li_border_width + 1,
                    last_li = $(liList).last(),
                    last_li_left = last_li.get(0).offsetLeft,
                    parent_width = $(liList).parent().width(),
                    parent_left = $(liList).parent()[0].offsetLeft;

                // 判断最后一张图片的位置
                if (last_li_left < parent_width + parent_left &&
                    last_li_left + last_li.width() > parent_width + parent_left) {
                    // 最后一张图只出现一部分
                    li_left_offset = last_li_left + last_li.width() - $(liList).parent().width();
                } else if (last_li_left + last_li.width() < $(liList).parent().width()) {
                    // 最后一张图已经完全出现，那么就不用再向左移动了
                    li_left_offset = 0;
                } else if (last_li_left + last_li.width() == $(liList).parent().width()) {
                    li_left_offset = 2 * li_border_width;
                }

                liList.each(function (i, li) {
                    $(li).animate({
                        left: li.offsetLeft - li_left_offset
                    })
                });
            }

            // 右边一张图片进行基本的点击事件
            var img = $(".active").next().find("span");
            if (img.length > 0) {
                img.index = $(".pv_list li span", $(context)).index($(img));
                this.handleClick(img, context);
            }
        },
        // 焦点位置的处理
        moveActivePosition:function(){

        }

    };

    pictrueView.init = function (dom) {
        var _this_ = this;
        $(dom).each(function (i, e) {
            new _this_(e);
        });
    };

    window["pictrueView"] = pictrueView;
})(jQuery);